<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import { ref } from 'vue'
import{register} from '@/apis/user'

const form = ref({
  username: '',
  account: '',
  password: '',
  // confirmPassword: '',
  // phone: '',
  // address: '',
  // question1: '',
  // answer1: '',
  // question2: '',
  // answer2: '',
  // question3: '',
  // answer3: ''

  phone_number: '',  // 修正为后端字段名
  default_addt_ress: '', // 修正为后端字段名
  securityQuestions: [
    { question: '', answer: '' },
    { question: '', answer: '' },
    { question: '', answer: '' }
  ]
})

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  account: [

    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码至少6个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== form.value.password) {
          callback(new Error('两次密码输入不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  address: [{ required: true, message: '请输入收货地址', trigger: 'blur' }],
  question1: [{ required: true, message: '问题1不能为空', trigger: 'blur' }],
  answer1: [{ required: true, message: '答案1不能为空', trigger: 'blur' }],
  question2: [{ required: true, message: '问题2不能为空', trigger: 'blur' }],
  answer2: [{ required: true, message: '答案2不能为空', trigger: 'blur' }],
  question3: [{ required: true, message: '问题3不能为空', trigger: 'blur' }],
  answer3: [{ required: true, message: '答案3不能为空', trigger: 'blur' }],
  phone_number: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
}

const formRef = ref(null)
const resetForm = () => {
  formRef.value.resetFields()
}

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      // 提交表单数据到接口
      register({
        username: form.value.username,
        password: form.value.password,
        account: form.value.account,
        phone_number: form.value.phone_number,
        default_addt_ress: form.value.default_addt_ress,
        securityQuestions: form.value.securityQuestions
      })
      .then(response => {
        console.log('注册成功', response.data)
        // 可以跳转到其他页面或显示成功消息
      })
      .catch(error => {
        console.error('注册失败', error)
        // 处理失败逻辑（如弹出错误提示）
      })
    } else {
      console.log('表单验证失败')
    }
  })
}

</script>

<template>
  <!-- 返回登录页按钮 -->
<router-link to="/login">
  <button class="back-btn">
    <span class="back-icon">←</span> 返回登录页
  </button>
</router-link>
  <div id="register">
    <el-form
      :model="form"
      ref="formRef"
      label-width="120px"
      :rules="rules"
      status-icon
      class="custom-form"
    >

      <div class="left">
        <el-form-item label="用户头像">
          <el-upload
            class="avatar-uploader"
            action="/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            list-type="picture-card"
            :on-preview="handlePreview"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="用户账号" prop="account">
          <el-input v-model="form.account" placeholder="请输入邮箱或手机号" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            v-model="form.password"
            placeholder="请输入密码"
            type="password"
            :show-password="true"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="phone_number">
          <el-input v-model="form.phone_number" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item label="收货地址" prop="default_addt_ress">
          <el-input
            v-model="form.default_addt_ress"
            placeholder="请输入收货地址"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 5 }"
          />
        </el-form-item>
      </div>

      <!-- 右侧安全问题部分 -->
      <div class="right">
        <div v-for="index in [0, 1, 2]" :key="index" class="input-group">
          <div class="input-wrapper">
            <input
              v-model="form.securityQuestions[index].question"
              :placeholder="'请输入问题' + (index + 1)"
              :id="'question' + (index + 1)"
              class="question"
              maxlength="30"
            />
            <span class="remaining-chars">{{ 30 - form.securityQuestions[index].question.length }}</span>
          </div>

          <div class="input-wrapper">
            <input
              v-model="form.securityQuestions[index].answer"
              :placeholder="'请输入答案' + (index + 1)"
              :id="'answer' + (index + 1)"
              class="answer"
              maxlength="30"
            />
            <span class="remaining-chars">{{ 30 - form.securityQuestions[index].answer.length }}</span>
          </div>
        </div>
      </div>
        <!-- 重置和提交按钮 -->
        <div class="but">
          <button class="reset-btn" @click="resetForm">重置</button>
          <button class="submit-btn" @click="submitForm">提交</button>
        </div>

    </el-form>
  </div>
</template>


<!--<style scoped lang="scss">-->
<!--#register {-->
<!--  width: 100%;-->
<!--  height: 100vh;-->
<!--  display: flex;-->
<!--  justify-content: center; /* 水平居中 */-->
<!--  align-items: center; /* 垂直居中 */-->
<!--}-->
<!--.custom-form {-->
<!--  width: 80%;-->
<!--  height: 90%;-->
<!--  display: flex;-->
<!--  justify-content: space-around; /* 均匀分布，元素之间和边缘有间隔 */-->
<!--  border-radius: 8px; /* 圆角 */-->
<!--  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.1);-->
<!--}-->
<!--.left {-->
<!--  padding-top: 4%;-->
<!--  width: 40%;-->
<!--}-->
<!--.right {-->
<!--  width: 40%;-->
<!--  padding-top: 4%;-->
<!--  display: flex;-->
<!--  flex-direction: column; /* 设置为垂直排列 */-->
<!--  gap: 20px; /* 设置元素之间的间隙，值可以根据需要调整 */-->
<!-- -->
<!--}-->

<!--/* 头像框样式 */-->
<!--.avatar-uploader {-->
<!--  display: inline-block;-->
<!--  width: 100px;-->
<!--  height: 100px;-->
<!--  border-radius: 100%; /* 圆形 */-->
<!--  border: 2px solid #dcdfe6;-->
<!--  overflow: hidden;-->
<!--  background-color: #f2f2f2;-->
<!--  position: relative;-->
<!--}-->

<!--/* 设置输入框容器 */-->
<!--.input-group {-->
<!--  display: flex;-->
<!--  flex-direction: column; /* 改为竖直排列 */-->
<!--  align-items: stretch; /* 让输入框的宽度最大化 */-->
<!--  width: 100%; /* 确保容器宽度足够 */-->
<!--  border: 1px solid #ccc; /* 给容器添加边框 */-->
<!--  border-radius: 4px; /* 圆角边框 */-->
<!--  padding: 10px; /* 给容器添加内边距 */-->
<!--  box-sizing: border-box; /* 计算包括内边距和边框 */-->
<!--}-->

<!--/* 设置问题输入框 */-->
<!--.input-group .question {-->
<!--  border: none; /* 去除自带边框 */-->
<!--  padding: 12px 12px; /* 设置内边距 */-->
<!-- -->
<!--  margin-bottom: 8px; /* 设置问题框与分隔符的间隔 */-->
<!--  outline: none; /* 去除点击时的外边框 */-->
<!--  word-wrap: break-word; /* 支持换行 */-->
<!--  padding-right: 30px; /* 给右边腾出空间显示剩余字符数 */-->
<!--}-->

<!--/* 设置答案输入框 */-->
<!--.input-group .answer {-->
<!--  border: none; /* 去除自带边框 */-->
<!--  padding: 10px 12px; /* 设置内边距 */-->
<!--  min-width: 200px; /* 设置最小宽度 */-->
<!--  min-height: 40px; /* 设置最小高度 */-->
<!--  outline: none; /* 去除点击时的外边框 */-->
<!--  word-wrap: break-word; /* 支持换行 */-->
<!--  padding-right: 30px; /* 给右边腾出空间显示剩余字符数 */-->
<!--}-->


<!--/* 横线分隔符样式 */-->
<!--.separator {-->
<!--  width: 100%;-->
<!--  height: 1px;-->
<!--  background-color: #ccc; /* 横线颜色 */-->
<!--  margin: 8px 0; /* 上下间隔 */-->
<!--}-->
<!--.input-wrapper {-->
<!--  position: relative;-->
<!--}-->
<!--.remaining-chars {-->
<!--  position: absolute;-->
<!--  right: 10px; /* 调整剩余字符数的位置 */-->
<!--  top: 50%;-->
<!--  transform: translateY(-50%);-->
<!--  font-size: 12px;-->
<!--  color: gray;-->
<!--}-->

<!--.but {-->
<!--  display: flex; /* 使用 flex 布局 */-->
<!--  justify-content: space-around; /* 均匀分布，元素之间和边缘有间隔 */-->
<!--  gap: 15px; /* 设置按钮之间的间隔，可以根据需要调整 */-->
<!--}-->
<!--button {-->
<!--  width: 100px; /* 设置按钮固定宽度 */-->
<!--  padding: 8px 12px; /* 按钮内边距 */-->
<!--  border: 1px solid #ffffff; /* 默认边框 */-->
<!--  background-color: #86f0de;-->
<!--  border-radius: 4px; /* 边角圆角 */-->
<!--  font-size: 14px; /* 字体大小 */-->
<!--  cursor: pointer; /* 鼠标样式 */-->
<!--  transition:-->
<!--    background-color 0.3s,-->
<!--    border-color 0.3s; /* 平滑过渡效果 */-->
<!--}-->

<!--button:hover {-->
<!--  background-color: #86f0de; /* 鼠标悬浮时的背景色 */-->
<!--}-->

<style scoped>
/* 使容器居中 */
#register {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f9f9f9;
}

.custom-form {
  width: 60%;  /* 控制表单宽度 */
  max-width: 1200px;  /* 最大宽度 */
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.left, .right {
  display: inline-block;
  vertical-align: top;
  width: 48%;  /* 每个部分占表单的一半宽度 */
}

.left {
  padding-right: 2%;
}

.right {
  padding-left: 2%;
}

.input-group {
  margin-bottom: 15px;
}

.input-wrapper {
  display: flex;
  justify-content: space-between;
}

.remaining-chars {
  color: #888;
  font-size: 12px;
}

.separator {
  border-bottom: 1px solid #ccc;
  margin: 10px 0;
}

.but {
  display: flex;
  justify-content: center; 
  margin-top: 20px;
}

.reset-btn,
.submit-btn {
  width: 20%;
  padding: 10px;
  font-size: 16px;
  border-radius: 4px;
  margin: 0 30px;
}

.submit-btn {
  background-color: #409EFF;
  color: white;
  border: none;
}

.reset-btn {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #333;
}
</style>
